<template>
    <div class="box">
        <ul class="tab">
            <li @click="tabli=1" :class="{active:tabli==1}">计划下达列表</li>
            <li @click="tabli=2" :class="{active:tabli==2}">ERP建项列表</li>
        </ul>
        <div class="show">
            <div v-show="tabli==1">
                <div class="search">
                    <div>
                       <input placeholder="请输入"/>   <el-button class="searchbtn">搜索</el-button>  <el-button plain class="xuanze">高级筛选</el-button>
                    </div>
                    <div class="searchlist">
                        <div v-for="v in searchlist" :key='v.id'>{{v.name}} <i class="el-icon-close"></i></div>
                        <div><i class="el-icon-plus"></i></div>
                    </div>
                </div>
                <div class="company">
                <div class="classify">
                    <span>所属单位:</span><span>全部</span>
                    <p><span v-for="v in companylist" :key="v.id">{{v.name}}</span></p>
                    <p>更多<i class="el-icon-arrow-down"></i></p>
                </div>
                 <div class="classify">
                    <span>所属专项:</span><span>全部</span>
                    <p class="ximu"><span v-for="v in speciallist" :key="v.id">{{v.name}}</span></p>
                    <p>更多<i class="el-icon-arrow-down"></i></p>
                </div>
                </div>
                
            </div>
            <div v-show="tabli==2">222</div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
               
                tabli:1,
                searchlist:[{id:'aa',name:"预安排"},{id:'bb',name:"续建"},{id:'cc',name:"总部决策"},{id:'dd',name:"省公司决策"},{id:'ff',name:"新建"}],
                companylist:[{id:"1a",name:"国网北京市电力公司"},{id:"2a",name:"国网天津市电力公司"},{id:"3a",name:"国网河北省电力有限公司"},{id:"4a",name:"国网翼北电力有限公司"},{id:"5a",name:"国网北京市电力公司"},{id:"1ag",name:"国网北京市电力公司"},{id:"2ga",name:"国网天津市电力公司"},{id:"3ga",name:"国网河北省电力有限公司"},{id:"4at",name:"国网翼北电力有限公司"},{id:"5ar",name:"国网北京市电力公司"}],
                speciallist:[{id:"ssd0",name:"电网小型基建"},{id:"shs0",name:"生产技改"},{id:"sse0",name:"生产辅助技改"},{id:"ssh0",name:"生产大修"},{id:"svs0",name:"电网小型基建"}]
            }
        }
    }
</script>
<style scoped>
li{
    list-style: none;
}
.box{
    width: 1760px;
height: 255px;
/* background: #c2c2c2; */
overflow: hidden;

border-radius: 2px;
margin-left: 17px;
}
.tab{
    display: flex;
}
.tab li{
    font-size: 14px;
    line-height: 19px;
    padding: 0 9px;
     cursor: pointer;
    /* border-bottom:solid 3px #FFF; */
}
.active{
    color: #277F7B;
    border-bottom: solid 3px #277F7B;
  
    z-index: 9999;
    /* background: olive; */
}
.show{
    width: 1760px;
    height: 206px;
    background: #fff;
}
.search{
    margin: 0 auto;
    margin-left: 480px;
    /* margin-top: 40px; */
}
.search input{
    width: 480px;
    height: 40px;
    margin-top: 40px;
    border: #ecedf1 1px solid;
   
}
.searchbtn{
    margin-left: -6px;
    background:#277F7B;
    padding: 14px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.xuanze{
    padding: 14px 20px ;
    color:#277F7B;
     font-size: 16px;
    font-weight: 600;
    border:solid 1px #277F7B;
}
.searchlist{
    display: flex;
    margin-top: 10px;
}
.searchlist div{
    padding: 6px 8px;
    background: #f3f3f3;
    margin-right: 10px;
}
.searchlist div:last-child{
    padding: 6px 30px;
}
.company{
    width: 1510px;
    margin: 0 auto;
    margin-top: 10px;
}
.company>.classify{
    width: 1510px;
    display: flex;
    min-height: 50px;
    border: solid 1px dashed;
    /* overflow: hidden; */
}

.classify>span:nth-child(1){
    font-weight: 800;
    height: 50px;
    width: 100px;
     display: inline-block;
    line-height: 50px;
}
.classify>span:nth-child(2){
    /* padding: 0 35px; */
    height: 50px;
    width: 110px;
     display: inline-block;
    line-height: 50px;
    text-align: center;
}
.classify p{
    display: inline-block;
   
}
.ximu{
    width: 1700px;
   
    /* width:100%; */
}
.classify p:last-child{
     color: #277F7B;
    width: 90px; line-height: 50px;float: right;
}
.classify>p> span{
    display: inline-block;
    padding: 3px 10px;
    /* background: #277F7B; */
    margin: 10px 0;
}
.classify p span:hover{
     background: #277F7B;
     color: #fff;
}
</style>